<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
    rel="stylesheet"
  />
  <style>
    * {
      font-family: 'Press Start 2P', cursive;
      box-sizing: border-box;
    }

    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h1 {
      margin: 0;
    }

    button {
      border: 0;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #ddd;
    }
  </style>
</head>

<div style="display: inline-block; position: relative">
  <div
    id="overlappingDiv"
    style="
      background-color: black;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
    "
  ></div>

  <canvas></canvas>
  <p style="color: red;position:fixed;top: 10px;right:10px;font-size: 30px;" id="noticeText"></p>
  <div
    id="characterDialogueBox"
    style="
      background-color: white;
      height: 140px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 4px black solid;
      display: none;
      padding: 12px;
    "
  ></div>

  <div id="userInterface" style="display: none">
    <!-- Represents health bar of draggle (enemy) -->
    <div
      style="
        background-color: white;
        width: 250px;
        position: absolute;
        top: 50px;
        left: 50px;
        border: 4px black solid;
        padding: 12px;
      "
    >
      <h1 style="font-size: 16px">Draggle</h1>
      <div style="position: relative">
        <div
          style="height: 5px; background-color: #ccc; margin-top: 10px"
        ></div>
        <div
          id="enemyHealthBar"
          style="
            height: 5px;
            background-color: green;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
          "
        ></div>
      </div>
    </div>

    <!-- Represents health bar of emby (us) -->
    <div
      style="
        background-color: white;
        width: 250px;
        position: absolute;
        top: 330px;
        right: 50px;
        border: 4px black solid;
        padding: 12px;
      "
    >
      <h1 style="font-size: 16px">Emby</h1>
      <div style="position: relative">
        <div
          style="height: 5px; background-color: #ccc; margin-top: 10px"
        ></div>
        <div
          id="playerHealthBar"
          style="
            height: 5px;
            background-color: green;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
          "
        ></div>
      </div>
    </div>

    <div
      style="
        background-color: white;
        height: 140px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 4px black solid;
        display: flex;
      "
    >
      <div
        id="dialogueBox"
        style="
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: white;
          padding: 12px;
          display: none;
          cursor: pointer;
        "
      >
        sdkfjlsdajl
      </div>
      <div
        id="attacksBox"
        style="
          width: 66.66%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        "
      ></div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 33.33%;
          border-left: 4px black solid;
        "
      >
        <h1 id="attackType" style="font-size: 16px">Attack Type</h1>
      </div>
    </div>
  </div>
</div>
<script>
  let username = window.prompt('请输入名称,开始冒险', '')
  let playerList = []
</script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"
  integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
  integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script src="data/audio.js"></script>
<script src="data/battleZones.js"></script>
<!-- <script src="data/collisions.js"></script> -->
<script src="data/map1_colllsions.js"></script>
<script src="data/attacks.js"></script>
<script src="data/monsters.js"></script>
<script src="data/characters.js"></script>
<script src="aStar.js"></script>
<script src="js/utils.js"></script>
<script src="classes.js"></script>
<script src="index.js"></script>
<script src="battleScene.js"></script>
<script src="socket/index.js"></script>
